import React, { memo } from 'react';
// import cls from 'classnames';
import { useStore } from 'reactflow';
import { isArray } from 'lodash-es';
import { Tag } from 'antd';

import styles from './style.module.less';
import ViewPanel from './ViewPanel';

const FlowSider: React.FC = () => {

  /**
   * 通过 useStore 获取画布上的节点 nodes
   * https://reactflow.dev/docs/api/react-flow-instance/#getnodes
   */
  const nodes = useStore((store) => {
    // console.log('side', store);
    return store.getNodes();
  });

  return (
    <aside
      className={styles.sider}
    >
      <ViewPanel />

      <div className={styles.print}>
        节点数量：<Tag color={'processing'}>{nodes?.length}</Tag>

        {/* 遍历节点，显示历史记录 */}
        <ul className='list-none'>
          {
            isArray(nodes) && nodes.map((x) => (
              <li key={x.id} className={styles['print-item']}>
                <span>{x.data.label}</span>
                <span className={styles['print-item-tips']}>({x.type})</span>
              </li>
            ))
          }
        </ul>
      </div>
    </aside>
  );
};

export default memo(FlowSider);
